<template>
  <div>
    <div ref="chartRef" style="width:100%; height:350px"></div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, Ref, onMounted } from 'vue';
import { useECharts } from '/@/hooks/web/useECharts';
import { GraphChart } from 'echarts/charts';
export default defineComponent({
  props: {
    rowdata: {
      type: Array as PropType<Array>,
      default: [],  // 设置默认值
    },
    edges: {
      type: Array as PropType<Array>,
      default: [],  // 设置默认值
    },
    title: {
      type: String as PropType<string>,
      default: '载波整体态势-副',  // 设置默认值
    },
    title1: {
      type: String as PropType<string>,
      default: '国家-机构-载波关系图',  // 设置默认值
    },
  },
  setup(props) {
    const chartRef = ref<HTMLDivElement | null>(null);
    const { setOptions, resize, echarts, getInstance } = useECharts(
      chartRef as Ref<HTMLDivElement>,
    );
    echarts.use([
      GraphChart,
    ]);
    onMounted(() => {
      initchart()
    })
    function initchart() {
      // res = await axios.get(jsonPath);
      setOptions({
        tooltip: {
          trigger: 'item'
        },
        graphic: [
          {
            type: 'text',
            id: 'mainTitle',
            left: 20,
            top: 20,
            style: {
              text: props.title,
              fill: '#333',
              fontSize: 20,
              fontWeight: 'bold',
              textAlign: 'center'
            }
          },
          {
            type: 'text',
            id: 'subTitle',
            left: 20,
            top: 50,
            style: {
              text: props.title1,
              fill: '#999',
              fontSize: 12,
              textAlign: 'center'
            }
          },
        ],
        grid: {
          top: '10%',
          left: '10%',
          bottom: '10%',
          right: '10%',
        },
        toolbox: {
          left: 'right',
          top: '5%',
          feature: {
            dataView: {},
            restore: {},
            saveAsImage: {},
          },
        },
        legend: {
          orient: 'vertical',
          left: 'right',
          top: '15%',
          data: ['国家3', '国家4', '国家5', '国家6', '国家7']
        },
        series: [
          {
            type: 'graph',
            layout: 'force',
            roam: true,
            label: {
              position: 'right',
              formatter: '{b}'
            },
            categories: [
              {
                "name": "国家3",
                "keyword": {},
              },
              {
                "name": "国家4",
                "keyword": {},
              },
              {
                "name": "国家5",
                "keyword": {},
              },
              {
                "name": "国家6",
                "keyword": {},
              },
              {
                "name": "国家7",
                "keyword": {}
              }
            ],
            data: [
              { name: '节点1', value: 10, symbolSize: 20, "category": 3, symbol: 'rect', },
              { name: '节点2', value: 20, symbolSize: 30, "category": 3, symbol: 'circle', },
              { name: '节点3', value: 10, symbolSize: 20, "category": 2, symbol: 'rect' },
              { name: '节点4', value: 20, symbolSize: 30, "category": 2, symbol: 'circle' },
              { name: '节点5', value: 10, symbolSize: 20, "category": 4, symbol: 'triangle' },
              { name: '节点6', value: 20, symbolSize: 30, "category": 4, symbol: 'diamond' },
              { name: '节点7', value: 10, symbolSize: 20, "category": 4, symbol: 'rect' },
              { name: '节点8', value: 20, symbolSize: 30, "category": 1, symbol: 'circle' },
              { name: '节点9', value: 10, symbolSize: 20, "category": 1, symbol: 'rect' },
              { name: '节点10', value: 20, symbolSize: 30, "category": 5, symbol: 'circle' },
              { name: '节点11', value: 10, symbolSize: 20, symbol: 'rect' },
              { name: '节点12', value: 20, symbolSize: 30, symbol: 'circle' },
              { name: '节点13', value: 15, symbolSize: 25, "category": 1, symbol: 'diamond' },
              { name: '节点14', value: 30, symbolSize: 35, "category": 2, symbol: 'triangle' },
              { name: '节点15', value: 25, symbolSize: 28, "category": 1, symbol: 'hexagon' },
              { name: '节点16', value: 18, symbolSize: 32, "category": 2, symbol: 'ellipse' },
              { name: '节点17', value: 22, symbolSize: 30, "category": 3, symbol: 'roundRect' },
              { name: '节点18', value: 27, symbolSize: 35, "category": 4, symbol: 'star' },
              { name: '节点19', value: 20, symbolSize: 30, "category": 5, symbol: 'heart' },
              { name: '节点20', value: 15, symbolSize: 25, "category": 5, symbol: 'arrow' },
              { name: '节点21', value: 10, symbolSize: 20, "category": 1, symbol: 'rect' },
              { name: '节点22', value: 20, symbolSize: 30, "category": 2, symbol: 'circle' },
              { name: '节点23', value: 12, symbolSize: 22, "category": 1, symbol: 'rect' },
              { name: '节点24', value: 28, symbolSize: 24, "category": 2, symbol: 'circle' },
              { name: '节点25', value: 16, symbolSize: 26, "category": 3, symbol: 'triangle' },
              { name: '节点26', value: 20, symbolSize: 30, "category": 4, symbol: 'diamond' },
              { name: '节点27', value: 24, symbolSize: 32, "category": 1, symbol: 'hexagon' },
              { name: '节点28', value: 18, symbolSize: 28, "category": 2, symbol: 'star' },
              { name: '节点29', value: 22, symbolSize: 34, "category": 3, symbol: 'ellipse' },
              { name: '节点30', value: 26, symbolSize: 28, "category": 4, symbol: 'roundRect' },
              { name: '节点31', value: 30, symbolSize: 36, "category": 1, symbol: 'heart' },
              { name: '节点32', value: 14, symbolSize: 25, "category": 2, symbol: 'arrow' },
              { name: '节点33', value: 19, symbolSize: 29, "category": 3, symbol: 'rect' },
              { name: '节点34', value: 21, symbolSize: 33, "category": 4, symbol: 'circle' },
              { name: '节点35', value: 17, symbolSize: 27, "category": 1, symbol: 'triangle' },
              { name: '节点36', value: 23, symbolSize: 31, "category": 2, symbol: 'diamond' },
              { name: '节点37', value: 25, symbolSize: 30, "category": 3, symbol: 'hexagon' },
              { name: '节点38', value: 29, symbolSize: 35, "category": 4, symbol: 'star' },
              { name: '节点39', value: 27, symbolSize: 33, "category": 1, symbol: 'ellipse' },
              { name: '节点40', value: 16, symbolSize: 26, "category": 2, symbol: 'roundRect' },
              { name: '节点41', value: 22, symbolSize: 28, "category": 3, symbol: 'heart' },
              { name: '节点42', value: 25, symbolSize: 30, "category": 4, symbol: 'arrow' },
              { name: '节点43', value: 30, symbolSize: 35, "category": 1, symbol: 'rect' },
              { name: '节点44', value: 19, symbolSize: 28, "category": 2, symbol: 'circle' },
              { name: '节点45', value: 27, symbolSize: 30, "category": 3, symbol: 'triangle' },
              { name: '节点46', value: 22, symbolSize: 32, "category": 4, symbol: 'diamond' },
              { name: '节点47', value: 15, symbolSize: 20, "category": 1, symbol: 'hexagon' },
              { name: '节点48', value: 20, symbolSize: 30, "category": 2, symbol: 'star' },
              { name: '节点49', value: 25, symbolSize: 33, "category": 3, symbol: 'ellipse' },
              { name: '节点50', value: 18, symbolSize: 26, "category": 4, symbol: 'roundRect' },
            ],
            edges: [
              { source: '节点1', target: '节点2', symbolSize: 1, itemStyle: { color: 'gray', borderColor: 'black', borderWidth: 6 } },
              { source: '节点2', target: '节点3' },
              { source: '节点2', target: '节点4' },
              { source: '节点1', target: '节点4' },
              { source: '节点3', target: '节点4' },
              { source: '节点5', target: '节点6' },
              { source: '节点7', target: '节点8' },
              { source: '节点9', target: '节点10' },
              { source: '节点11', target: '节点12' },
              { source: '节点13', target: '节点14' },
              { source: '节点14', target: '节点5' },
              { source: '节点15', target: '节点16' },
              { source: '节点16', target: '节点17' },
              { source: '节点17', target: '节点18' },
              { source: '节点18', target: '节点19' },
              { source: '节点19', target: '节点20' },
              { source: '节点20', target: '节点21' },
              { source: '节点21', target: '节点22' },
              { source: '节点22', target: '节点15' },
              { source: '节点15', target: '节点20' },
              { source: '节点16', target: '节点19' },
              { source: '节点17', target: '节点18' },
              { source: '节点18', target: '节点21' },
              { source: '节点19', target: '节点22' },
              { source: '节点20', target: '节点16' },
              { source: '节点21', target: '节点17' },
              { source: '节点22', target: '节点15' },
              { source: '节点15', target: '节点16' },
              { source: '节点16', target: '节点17' },
              { source: '节点17', target: '节点18' },
              { source: '节点18', target: '节点19' },
              { source: '节点19', target: '节点20' },
              { source: '节点20', target: '节点21' },
              { source: '节点21', target: '节点22' },
              { source: '节点22', target: '节点23' },
              { source: '节点23', target: '节点24' },
              { source: '节点24', target: '节点25' },
              { source: '节点25', target: '节点26' },
              { source: '节点26', target: '节点27' },
              { source: '节点27', target: '节点28' },
              { source: '节点28', target: '节点29' },
              { source: '节点29', target: '节点30' },
              { source: '节点30', target: '节点31' },
              { source: '节点31', target: '节点32' },
              { source: '节点32', target: '节点33' },
              { source: '节点33', target: '节点34' },
              { source: '节点34', target: '节点35' },
              { source: '节点35', target: '节点36' },
              { source: '节点36', target: '节点37' },
              { source: '节点37', target: '节点38' },
              { source: '节点38', target: '节点39' },
              { source: '节点39', target: '节点40' },
              { source: '节点40', target: '节点41' },
              { source: '节点41', target: '节点42' },
              { source: '节点42', target: '节点43' },
              { source: '节点43', target: '节点44' },
              { source: '节点44', target: '节点45' },
              { source: '节点45', target: '节点46' },
              { source: '节点46', target: '节点47' },
              { source: '节点47', target: '节点48' },
              { source: '节点48', target: '节点49' },
              { source: '节点49', target: '节点50' },
            ]
          }
        ]
      })
    }
    return {
      chartRef,
      initchart
    }
  }
})
</script>
<style scoped lang=less>
.index2 {
  width: 100%;
  height: 100%;
  background: #fff;
}
</style>